Pentru a include imagini într-o pagină html se folosește eticheta <img />. Aceasta definește un element deschis și poate avea următoarele atribute:
- src - adresa imaginii care va fi inclusă în pagină (acest atribut este obligatoriu);
- alt - o scurtă descriere a conținutului imaginii (acest atribut este obligatoriu). Dacă browserul a fost setat să nu afișeze imaginile din pagină atunci această descriere va fi afișată în locul imaginii. Ea este de asemenea utilă atunci când pagina este prezentată de programele folosite de persoanele cu probleme de vedere;
- longdesc - atribut opțional având ca valoare o legătură către o pagină care conține o descriere mai detaliată a conținutului imaginii. Scopul acestei descrieri este similar cu cel al valorii atributului alt;
- height - înălțimea imaginii precizată în pixeli sau în procente din spațiul disponibil pentru afișare;
- width - lățimea imaginii precizată în pixeli sau în procente din spațiul disponibil pentru afișare. Atributele height și width sunt opționale. Dacă apar, ele forțează browser-ul să afișeze imaginea respectând dimensiunile precizate indiferent care sunt dimensiunile "naturale" ale imaginii (imaginea se scalează/deformează). Dacă dimensiunile sunt precizate în procente, acestea se referă la dimensiunea spațiului disponibil pentru afișare, nu la dimensiunea imaginii;
- usemap - atribut opțional care asociază imaginea cu un element <map>. Valoarea conținută trebuie să fie aceeași cu cea din atributul name al elementului <map> asociat. Mai multe despre elementul <map> puteți citi în unul din articolele următoare.
Folosiți elementul <img /> pentru a include imagini ilustrative - fotografii cu conținut semnificativ. Nu folosiți acest element pentru a include imagini strict decorative a căror absență nu ar diminua în nici un fel conținutul, semnificația paginii. Pentru astfel de imagini există metode de includere mult mai potrivite cum ar fi proprietatea background-image din CSS.
Exemple:
Codul HTML:
va avea ca efect apariția în pagină a imaginii de mai jos la dimensiunea ei reală (735 × 709 pixeli):
Pentru ca imaginea să se afișeze folosind codul de mai sus este necesar ca ea să se afle în același folder ca pagina HTML care o va conține (folderul curent). Dacă imaginea nu se află în același folder, atunci atributul src trebuie să conțină pe lângă numele fișierului și calea către acesta. Calea către un fișier imagine se poate preciza în două moduri:
- cale "absolută" : care va preciza locul în care se află fișierul imagine fie folosind calea fișierului în sistemul local de fișiere (de exemplu: C:\Users\imagini\work\invatzainfo\floare.jpg), fie folosind adresa URL a acestuia dacă este conținut de un folder gestionat de un server web (de exemplu: http://www.invatza.info/images/paginiweb/floare.jpg). Această variantă nu se recomandă deoarece, dacă grupul de foldere care conține paginile site-ului este mutat, căile de mai sus nu mai sunt valabile;
- cale "relativă" : în acest caz calea către fișierul imagine se va preciza pornind de la pagina în care dorim să afișăm imaginea respectivă. De exemplu să presupunem că avem structura de foldere de mai jos:
și dorim să includem imaginea floare.jpg în pagina index.html. În index.html vom folosi codul:
cu semnificația "include imaginea floare.jpg din folderul imagini, din folderul curent". Dacă dorim să includem imaginea și în pagina numită pagina.html vom folosi în aceasta codul
semnificația fiind "include imaginea floare.jpg din folderul imagini aflat în folderul părinte al celui curent". Notația "../" are semnificația de "folder părinte".
Exemplele de mai jos vă prezintă efectele folosirii atributelor width și height:
Exemple de folosire a elementului <img /> pentru a insera imagini în paginile HTML.
(click pe imagine pentru a vedea exemplul în browserul tău)
Menționăm de asemenea că <img /> este un element de tip inline. Dacă includeți mai multe imagini una după alta ele vor apărea pe aceeași linie (dacă au loc). O altă consecință a acestui fapt este că elementul <img /> trebuie să fie conținut într-un element de tip bloc pentru ca pagina să fie conformă standardului HTML.
Webliografie: